<template>
  <!-- 座位描述-->
  <el-row :gutter="10" class="margin-top-20">
    <el-col :span="5" style="min-height: 36px"></el-col>
    <!-- 可选座位-->
    <el-col :span="6">
      <el-image :src="canChoose" class="seat"/>
      <span class="seat-des">可选座位</span>
    </el-col>
    <!-- 已售座位-->
    <el-col :span="6">
      <el-image :src="hasSale" class="seat"/>
      <span class="seat-des">已售座位</span>
    </el-col>
    <!-- 已选座位 -->
    <el-col :span="6">
      <el-image :src="chooseIt" class="seat"/>
      <span class="seat-des">已选座位</span>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "SeatDescription",
  data() {
    return {
      canChoose: require('@/assets/image/order/kexuanzuowei.png'),
      hasSale: require('@/assets/image/order/yishouzuowei.png'),
      chooseIt: require('@/assets/image/order/yixuanzuowei.png')
    }
  },
}
</script>

<style scoped>
.seat {
  height: 40px;
  width: 40px;
}

.seat-des {
  font-size: 14px;
  color: #999;
  position: relative;
  left: 5px;
  bottom: 13px;
}
</style>